<template>
	<view class="order-content height100 displayColumn">
		<view class="order-header">
			<uni-search-bar placeholder="请输入内容搜索"  cancelButton="none"   @confirm="search"  v-model="searchValue"
				 @clear="clear"></uni-search-bar>
				 
			 <up-tabs keyName="name" :list="tabList" @click="tabClick">
				 <template #content="{item,keyName,index}">
					 <view style="position: relative;">
						{{item[keyName]}}
						<up-badge :absolute="true" :offset="[-4,-16]"  :type="'error'" max="99" :value="item['badge']"></up-badge>
					 </view>
				 </template>
			 </up-tabs>	 
		</view>
		<scroll-view
		:refresher-enabled="true"
		:refresher-triggered="isRefreshing"
		refresher-default-style="none"
		    @refresherrefresh="handleRefresh"
		 class="order-body loadScrollView" scroll-y @scrolltolower="scrolltolower">
		   <view slot="refresher" style="width: 100%;text-align: center;">
         <top-load-more :loadMoreStatus="loadMoreStatus"></top-load-more>
		   </view>
			<order-info :order="order" v-for="(order,index) in list" :key="index"></order-info>
			<up-loadmore  :status="loadStatus"></up-loadmore>	
		</scroll-view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
import OrderInfo from "@/components/order/OrderInfo.vue";
import TopLoadMore from "@/components/TopLoadMore.vue";
const searchValue = ref('');
const loadStatus = ref('loading');//more|loading|nomore
const loadMoreStatus = ref('more');//more|loading|nomore
const isLoad = ref(false);
const isRefreshing = ref(false);
const tabList = ref([
	{name:'全部',value:0,badge:0},
	{name:'待付款',value:1,badge:3},
	{name:'待发货',value:3,badge:1},
	{name:'待收货',value:4,badge:2},
	{name:'已完成',value:5,badge:5},
	{name:'退款/售后',value:7,badge:0},
]);

const list = ref([
	{
		id:1,
		companyName:'卡孚斯机械店',
		companyAvatar:'https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEIhGbh22n49Y7cZ5RGdyialW3uR0Wny4vKa5VIMpYkcR9QuTJr7FR96wktUIhthN8u7gGNXtU8AbGCYZJHRcTHAkQ5HH2ULh5KoaHICVlBwwtg/132',
		orderStatus:0,
		orderAmount:33.9,
		orders:[
			{
				productName:'螺母木木木木螺母木木木木螺母木木木木螺母木木木木',
				specificationName:'铂金螺母100g*10000螺母木木木木螺母木木木木螺母木木木木螺母木木木木',
				quantity:1,
				price:3.3,
				specificationImg:'http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/productImg/202503/fe6a90e20dee436190537736e2349e00.jpg?Expires=2613815931&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=rtml%2BDaMgMzi0v81F4hL8ifN6dk%3D',
				isRefund:false,
			},
			{
				productName:'螺母2',
				specificationName:'黄金螺母100g*10000',
				quantity:1,
				specificationImg:'http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/productImg/202503/fe6a90e20dee436190537736e2349e00.jpg?Expires=2613815931&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=rtml%2BDaMgMzi0v81F4hL8ifN6dk%3D',
				price:4.3,
				isRefund:true,
				refundStatus:0
			}
		]
	},
	{
		id:2,
		companyName:'卡孚斯机械店',
		companyAvatar:'https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEIhGbh22n49Y7cZ5RGdyialW3uR0Wny4vKa5VIMpYkcR9QuTJr7FR96wktUIhthN8u7gGNXtU8AbGCYZJHRcTHAkQ5HH2ULh5KoaHICVlBwwtg/132',
		orderStatus:1,
		orderAmount:33.9,
		orders:[
			{
				productName:'螺母',
				specificationName:'铂金螺母100g*10000',
				quantity:1,
				specificationImg:'http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/productImg/202503/fe6a90e20dee436190537736e2349e00.jpg?Expires=2613815931&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=rtml%2BDaMgMzi0v81F4hL8ifN6dk%3D',
				price:3.3,
				isRefund:false,
			},
			{
				productName:'螺母2',
				specificationName:'黄金螺母100g*10000',
				specificationImg:'http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/productImg/202503/fe6a90e20dee436190537736e2349e00.jpg?Expires=2613815931&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=rtml%2BDaMgMzi0v81F4hL8ifN6dk%3D',
				quantity:1,
				price:4.3,
				isRefund:true,
				refundStatus:0
			}
		]
	},
	{
		id:3,
		companyName:'卡孚斯机械店',
		companyAvatar:'https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEIhGbh22n49Y7cZ5RGdyialW3uR0Wny4vKa5VIMpYkcR9QuTJr7FR96wktUIhthN8u7gGNXtU8AbGCYZJHRcTHAkQ5HH2ULh5KoaHICVlBwwtg/132',
		orderStatus:2,
		orderAmount:33.9,
		orders:[
			{
				productName:'螺母',
				specificationName:'铂金螺母100g*10000',
				specificationImg:'http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/productImg/202503/fe6a90e20dee436190537736e2349e00.jpg?Expires=2613815931&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=rtml%2BDaMgMzi0v81F4hL8ifN6dk%3D',
				quantity:1,
				price:3.3,
				isRefund:false,
			},
			{
				productName:'螺母2',
				specificationName:'黄金螺母100g*10000',
				specificationImg:'http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/productImg/202503/fe6a90e20dee436190537736e2349e00.jpg?Expires=2613815931&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=rtml%2BDaMgMzi0v81F4hL8ifN6dk%3D',
				quantity:1,
				price:4.3,
				isRefund:true,
				refundStatus:0
			}
		]
	},
	{
		id:4,
		companyName:'卡孚斯机械店',
		companyAvatar:'https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEIhGbh22n49Y7cZ5RGdyialW3uR0Wny4vKa5VIMpYkcR9QuTJr7FR96wktUIhthN8u7gGNXtU8AbGCYZJHRcTHAkQ5HH2ULh5KoaHICVlBwwtg/132',
		orderStatus:3,
		orderAmount:33.9,
		orders:[
			{
				productName:'螺母',
				specificationName:'铂金螺母100g*10000',
				specificationImg:'http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/productImg/202503/fe6a90e20dee436190537736e2349e00.jpg?Expires=2613815931&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=rtml%2BDaMgMzi0v81F4hL8ifN6dk%3D',
				quantity:1,
				price:3.3,
				isRefund:false,
			},
			{
				productName:'螺母2',
				specificationName:'黄金螺母100g*10000',
				specificationImg:'http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/productImg/202503/fe6a90e20dee436190537736e2349e00.jpg?Expires=2613815931&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=rtml%2BDaMgMzi0v81F4hL8ifN6dk%3D',
				quantity:1,
				price:4.3,
				isRefund:true,
				refundStatus:0
			}
		]
	},
	{
		id:5,
		companyName:'卡孚斯机械店',
		companyAvatar:'https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEIhGbh22n49Y7cZ5RGdyialW3uR0Wny4vKa5VIMpYkcR9QuTJr7FR96wktUIhthN8u7gGNXtU8AbGCYZJHRcTHAkQ5HH2ULh5KoaHICVlBwwtg/132',
		orderStatus:4,
		orderAmount:33.9,
		orders:[
			{
				productName:'螺母',
				specificationName:'铂金螺母100g*10000',
				specificationImg:'http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/productImg/202503/fe6a90e20dee436190537736e2349e00.jpg?Expires=2613815931&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=rtml%2BDaMgMzi0v81F4hL8ifN6dk%3D',
				quantity:1,
				price:3.3,
				isRefund:false,
			},
			{
				productName:'螺母2',
				specificationName:'黄金螺母100g*10000',
				specificationImg:'http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/productImg/202503/fe6a90e20dee436190537736e2349e00.jpg?Expires=2613815931&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=rtml%2BDaMgMzi0v81F4hL8ifN6dk%3D',
				quantity:1,
				price:4.3,
				isRefund:true,
				refundStatus:0
			}
		]
	},
	{
		id:6,
		companyName:'卡孚斯机械店',
		companyAvatar:'https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEIhGbh22n49Y7cZ5RGdyialW3uR0Wny4vKa5VIMpYkcR9QuTJr7FR96wktUIhthN8u7gGNXtU8AbGCYZJHRcTHAkQ5HH2ULh5KoaHICVlBwwtg/132',
		orderStatus:5,
		orderAmount:33.9,
		orders:[
			{
				productName:'螺母',
				specificationName:'铂金螺母100g*10000',
				specificationImg:'http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/productImg/202503/fe6a90e20dee436190537736e2349e00.jpg?Expires=2613815931&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=rtml%2BDaMgMzi0v81F4hL8ifN6dk%3D',
				quantity:1,
				price:3.3,
				isRefund:false,
			},
			{
				productName:'螺母2',
				specificationName:'黄金螺母100g*10000',
				specificationImg:'http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/productImg/202503/fe6a90e20dee436190537736e2349e00.jpg?Expires=2613815931&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=rtml%2BDaMgMzi0v81F4hL8ifN6dk%3D',
				quantity:1,
				price:4.3,
				isRefund:true,
				refundStatus:2
			}
		]
	},
	{
		id:7,
		companyName:'卡孚斯机械店',
		companyAvatar:'https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEIhGbh22n49Y7cZ5RGdyialW3uR0Wny4vKa5VIMpYkcR9QuTJr7FR96wktUIhthN8u7gGNXtU8AbGCYZJHRcTHAkQ5HH2ULh5KoaHICVlBwwtg/132',
		orderStatus:6,
		orderAmount:33.9,
		orders:[
			{
				productName:'螺母',
				specificationName:'铂金螺母100g*10000',
				specificationImg:'http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/productImg/202503/fe6a90e20dee436190537736e2349e00.jpg?Expires=2613815931&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=rtml%2BDaMgMzi0v81F4hL8ifN6dk%3D',
				quantity:1,
				price:3.3,
				isRefund:false,
			},
			{
				productName:'螺母2',
				specificationName:'黄金螺母100g*10000',
				specificationImg:'http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/productImg/202503/fe6a90e20dee436190537736e2349e00.jpg?Expires=2613815931&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=rtml%2BDaMgMzi0v81F4hL8ifN6dk%3D',
				quantity:1,
				price:4.3,
				isRefund:true,
				refundStatus:1
			}
		]
	}
]);

function search(){
	console.info('search',searchValue.value)
}
function clear(){
	console.info('clear',searchValue.value)
}	
function tabClick(item){
	console.info('item',item)
}
function handleRefresh(){
	isRefreshing.value = true;
	loadMoreStatus.value = 'loading';
	console.info('refresh','触发刷新')
	setTimeout(()=>{
		loadMoreStatus.value = 'nomore';
	},1400)
	setTimeout(()=>{
		isRefreshing.value = false;
		setTimeout(()=>{
			loadMoreStatus.value = 'more';
		},1000)
	},2000)
}
function scrolltolower(){
	if(isLoad.value) return;
	isLoad.value = true;
	console.info('scrolltolower','到底部了')
	let lastId =  list.value[list.value.length - 1].id;
	let newArr = [];
	for (var i = 0; i < 10; i++) {
		lastId++;
		newArr.push({
			id:lastId,
			price: 8243,
			title: '俱往矣，数风流人物，还看今朝',
			shop: '李白杜甫白居易旗舰店',
			image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
		})
	}
	setTimeout(()=>{
		list.value = list.value.concat(newArr);
		isLoad.value = false;
	},1500)
	
}
</script>

<style lang="scss" scoped>
	.order-content{
		.order-header{
			background-color: white;
			padding-bottom: 10rpx;
		}
		.order-body{
			padding: 0rpx 10rpx;
			width: calc(100% - 20rpx);
			
		}
	}

</style>